<template>
  <div class="wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增活动</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <ul class="clearfix typeList">
        <li class="fl clearfix" @click="addActive(1)">
          <img src="http://img.ihotelvip.com/1547778798893"
            alt=""
            width="80"
            height="80"
            class="fl">
          <div class="fl">
            <h3>开卡有礼</h3>
            <p>多重好礼引导开卡</p>
          </div>
        </li>
        <li class="fl clearfix" @click="addActive(2)">
          <img src="https://image.ihotelvip.com/1556343554841"
            alt=""
            width="80"
            height="80"
            class="fl">
          <div class="fl">
            <h3>升级有礼</h3>
            <p>客户生日送上</p>
          </div>
        </li>
        <li class="fl clearfix" @click="addActive(3)">
          <img src="http://img.ihotelvip.com/1547778869880"
            alt=""
            width="80"
            height="80"
            class="fl">
          <div class="fl">
            <h3>消费有礼</h3>
            <p>固定日期送上会员礼品</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  components: {
    
  },
  props: {},
  data() {
    return {
     
    };
  },
  watch: {},
  computed: {},
  methods: {
    addActive(type){
      this.$router.push(`/index/activeAddEdit?type=${type}`)
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .easy-content {
    .typeList {
      li {
        padding: 10px 20px;
        margin-right: 20px;
        box-shadow: 8px 8px 15px #999;
        border-radius: 3px;
        &:hover {
          box-shadow: 8px 8px 15px #ddd;
          cursor: pointer;
        }
        & > img {
          margin-right: 10px;
        }
        p {
          margin-top: 30px;
        }
      }
    }
  }
}
</style>